$(function() {
    //1. 要获取选项卡区域
    var $imagerolls = $("#jnImageroll div a");
    //2. 将选项卡设置透明度
    $imagerolls.css("opacity","0.7");
    var index = 0;//卡片区域的的索引值
    //3. 当鼠标悬浮在卡片区域的时候就替换图片
    $imagerolls.mouseover(function() {
        //4. 当鼠标移动到某个卡片区域的时候就要获取它的索引值
        index = $imagerolls.index(this);
        //5.替换图片
        showImg(index);
    });

    //轮播图(每隔5秒更换图片)
    $("#jnImageroll").hover(function(){
            //鼠标进入的时候
    },function(){
            //鼠标离开的时候
            //每隔5秒更换图片
            //setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。重复调用多次函数
            //用法：setInterval(code,millisec[,"lang"])
            //setTimeout()	在指定的毫秒数后调用函数或计算表达式。  只调用一次
            setInterval(function(){
                showImg(index);
                index++;
            },2000)	

    }) 

    // 替换图片的函数
    function showImg(index) {
        //1.获取最外层的div
        var $rolobj = $("#jnImageroll");
        //2.查找#jnImageroll中div下的所有a节点
        var $list = $rolobj.find("div a");
        //3.根据传入的index获取到a标签所对应的属性href的值
        var newhref = $list.eq(index).attr("href");
        //4.将上面获取到的newhref(###1)设置为 <a href="###1" id="JS_imgWrap">
        // fadeIn().fadeOut();渐变效果分别表示淡入和淡出
        // siblings()选中与当前节点同级的其它兄弟节点
        $("#JS_imgWrap").attr("href",newhref).find("img").eq(index).stop(true,true).fadeIn().siblings().fadeOut();
        //给选项卡添加样式addClass("chos")  删除样式 removeClass("chos")
        $list.removeClass("chos").css("opacity",0.7).eq(index).addClass("chos").css("opacity",1);

    }

})



